<template>
    <div class="app-container">
        <!-- 添加或修改车辆信息表对话框 -->
        <el-form ref="form" :model="form" label-width="80px">
            <el-row><el-col :span="12">
                    <el-form-item label="车牌号" prop="numberPlate">
                        <el-input v-model="form.numberPlate" placeholder="请输入车牌号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车辆类型" prop="vehicleType">
                        <el-select v-model="form.vehicleType" placeholder="请选择车辆类型">
                            <el-option v-for="dict in dict.type.vehicle_type" :key="dict.value" :label="dict.label"
                                :value="parseInt(dict.value)"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row><el-col :span="12">
                    <el-form-item label="车架号" prop="vin">
                        <el-input v-model="form.vin" placeholder="请输入车架号" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="购置日期" prop="purchaseDate">
                        <el-date-picker clearable v-model="form.purchaseDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="请选择购置日期">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row><el-col :span="12">
                    <el-form-item label="生产年月" prop="productionMonth">
                        <!-- <el-input v-model="form.productionMonth" placeholder="请输入生产年月" /> -->
                        <el-date-picker clearable v-model="form.productionMonth" type="month" value-format="yyyy-MM"
                            placeholder="请选择生产年月">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="检测站" prop="detectionstationId">
                        <el-select v-model="form.detectionstationId" placeholder="请选择">
                            <el-option v-for="dict in dict.type.detection_station" :key="dict.value" :label="dict.label"
                                :value="parseInt(dict.value)"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row><el-col :span="12">
                    <el-form-item label="车主姓名" prop="ownerName">
                        <el-input v-model="form.ownerName" placeholder="请输入车主姓名" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="车主电话" prop="ownerPhone">
                        <el-input v-model="form.ownerPhone" placeholder="请输入车主电话" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>

<script>
export function isVehicleNumber(vehicleNumber) {
    var xreg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}(([0-9]{5}[DF]$)|([DF][A-HJ-NP-Z0-9][0-9]{4}$))/;
    var creg = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1}$/;
    if (vehicleNumber.length == 7) {
        return creg.test(vehicleNumber);
    } else if (vehicleNumber.length == 8) {
        return xreg.test(vehicleNumber);
    } else {
        return false;
    }
}

import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/info/info";
import { getToken } from "@/utils/auth";
// 导入模板接口importTemplate


export default {
    name: "Vehicleinfo",
    dicts: ['detection_station', 'vehicle_type'],
    props: {
        //业务id
        businessId: {
            type: Number,
            default: null
        },
    },
    data() {
        return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            //选中车牌号
            platenums: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            //维度数据
            dimensionInfo: null,
            //维度数据格式化
            dimensionInfoFormat: null,
            //批量修改维度数据格式化
            dimensionInfoupdateformat: null,
            // 车辆信息表表格数据
            vehicleinfoList: [],
            //维度弹出层标题
            dimensiontitle: "",
            //是否弹出维度弹出层
            dimensionopen: false,
            //是否弹出批量修改维度弹出层
            dimensionupdateopen: false,
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 15,
                numberPlate: null,
                ownerName: null,
                ownerPhone: null,
                detectionstationId: null,
                dimensionOne: null,
                dimensionTwo: null,
                dimensionThree: null,
                dimensionFour: null,
                dimensionFive: null,
            },
            // 表单参数
            form: {},
            // 表单校验

        };
    },
    created() {
        this.handleUpdate();
    },
    methods: {
        /** 查询车辆信息表列表 */
        getList() {
            let that = this;
            this.loading = true;
            if (that.dimensionInfo != null)
                this.queryParams.detectionstationId = that.dimensionInfo.detectionstation_id;
            listInfo(this.queryParams).then(response => {
                this.vehicleinfoList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleUpdate() {
            const vehicleId = this.businessId;
            getInfo(vehicleId).then(response => {
                this.form = response.data;
                this.open = true;
                this.title = "修改车辆信息表";
            });
        },
    }
};
</script>
